<script setup lang="ts">
import type { GtmInstanceItem } from '@/apis/model/dns'
import { Message } from '@arco-design/web-vue'
import {
  deleteDnsAuthorityGtmInstanceApi,
  getDnsAuthorityGtmInstanceApi,
} from '@/apis/modules/dns'
import EditDialog from '../../components/EditDialog.vue'
import StrategyList from './components/StrategyList.vue'

const route = useRoute()
const router = useRouter()
const appList = computed(() => useAppStore().appList)
const {
  visible: editDialogVisible,
  open: openEditDialog,
  data: editDialogData,
} = usePopup()

// 删除实例
function handleDeleteInstance(record: GtmInstanceItem) {
  ModalHelper.error({
    title: '删除实例',
    content: `确定要删除 “${record.name}” 实例吗？`,
    okText: '删除',
    width: 480,
    closable: false,
    onOk: async () => {
      await deleteDnsAuthorityGtmInstanceApi({ id: record.id })
      Message.success('删除成功')
      router.push({ name: 'DnsInstanceList' })
    },
  })
}
const basicInfo = ref<GtmInstanceItem>({ address_pool_type: undefined })
const addressPoolType = computed(() => basicInfo.value?.address_pool_type || 1)
const loading = ref(false)
async function getDetail() {
  loading.value = true
  await getDnsAuthorityGtmInstanceApi({ id: route.params?.id })
    .then((res: GtmInstanceItem) => {
      Object.assign(basicInfo.value, res)
    })
    .finally(() => (loading.value = false))
}
onMounted(getDetail)
</script>

<template>
  <main-container
    :pagination="false"
    :loading="false"
    :breadcrumb="basicInfo.name || '详情'"
  >
    <div class="detail-container">
      <div class="detail-title">
        <span>基础信息</span>
        <section class="ml-auto flex space-x-2">
          <a-button
            class="shrink-0 !border-none !bg-white"
            type="outline"
            @click="openEditDialog(basicInfo)"
          >
            <template #icon>
              <i-icons-edit />
            </template>
          </a-button>
          <a-button
            class="shrink-0 !border-none !bg-white"
            type="outline"
            @click="
              handleDeleteInstance({ id: basicInfo?.id, name: basicInfo?.name })
            "
          >
            <template #icon>
              <i-icons-delete />
            </template>
          </a-button>
        </section>
      </div>
      <div class="basic-info-box">
        <div class="basic-info-item">
          <div class="detail-item-title">
            实例名称
          </div>
          <div class="detail-item-value">
            {{ basicInfo?.name || '-' }}
          </div>
        </div>
        <div class="basic-info-item">
          <div class="detail-item-title">
            接入域名
          </div>
          <div class="detail-item-value">
            {{ basicInfo?.record_name }}.{{ basicInfo?.domain_name || '-' }}
          </div>
        </div>
        <div class="basic-info-item">
          <div class="detail-item-title">
            TTL
          </div>
          <div class="detail-item-value">
            {{ getOptionLabel(basicInfo?.ttl, ttlOptions) }}
          </div>
        </div>
        <div class="basic-info-item">
          <div class="detail-item-title">
            所属应用
          </div>
          <div class="detail-item-value">
            {{ getOptionLabel(basicInfo?.app_id, appList) }}
          </div>
        </div>
        <div class="basic-info-item">
          <div class="detail-item-title">
            地址池来源
          </div>
          <div class="detail-item-value">
            {{ getOptionLabel(basicInfo?.address_pool_type, poolTypeOptions) }}
          </div>
        </div>
      </div>
    </div>
    <a-alert
      style="border-radius: 8px"
      class="my-6"
      type="warning"
    >
      <template #icon>
        <i-icons-warning class="mb-1" />
      </template>
      <div class="text-[12px] text-[#4E5969]">
        建议添加一条默认策略以处理所有未匹配的地理位置流量，确保服务的全局可用性。
      </div>
    </a-alert>
    <strategy-list
      :key="addressPoolType"
      :type="addressPoolType"
    />
    <edit-dialog
      v-model:visible="editDialogVisible"
      :record="editDialogData"
      @reload="getDetail"
    />
  </main-container>
</template>

<style lang="less" scoped>
.detail-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  border-radius: var(--border-radius-lg, 8px);
  border: 1px solid var(--border-1, #f2f3f5);
  background: #fff;
  .detail-title {
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding: 0 16px;
    background-color: #f7f8fa;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  .basic-info-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 24px 16px;
    gap: 24px 16px;
    align-self: stretch;

    .basic-info-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      flex: 1 0 0;

      .detail-item-title {
        color: var(--text-3, #86909c);

        /* regular/12 */
        font-family: 'Microsoft YaHei UI';
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
      }

      .detail-item-value {
        color: var(--text-1, #1d2129);
        line-height: 16px;
        display: flex;
        align-items: center;
        column-gap: 4px;
        /* regular/12 */
        font-family: 'Microsoft YaHei UI';
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        @apply !whitespace-pre-line break-all;
      }
    }
  }
}
</style>
